<template>
  <div class="hellos">
    <mt-header>
      <router-link to="/control" slot="left">
        <mt-button icon="back">个人中心</mt-button>
      </router-link>
    </mt-header>
    <div class="logins">
      <div align="center" v-if="!is_login">
        <div class="iconfont icon-touxiang"></div>
        <router-link to="/control/login/logins" tag="span" >登录</router-link>
      </div>
      <div align="center" v-else>
        <div class="headico ">
          <img :src=img alt="">
        </div>
        <a class="names" >
          <span class="username">{{name}}</span>
          <span class="zhuxiao" @click="zhuxiao()">注销登录</span>
        </a>
      </div>
    </div>
    <div class="loginjf" align="center">
      <div class="logl">
        <span class="iconfont icon-tubiaozhizuo-"></span>
        <p>533积分</p>
      </div>
      <div class="logr">
        <span class="iconfont icon-tubiao15"></span>
        <p>我的消息</p>
      </div>
    </div>
    <div class="logs3">
      <div>
        <p>我的文章</p>
        <router-link tag="span" class="iconfont icon-jiantou" to="/control"></router-link>
      </div>
      <div>
        <p>我的付费应用</p>
        <router-link tag="span" class="iconfont icon-jiantou" to="/control"></router-link>
      </div>
      <div>
        <p>优惠券</p>
        <router-link tag="span" class="iconfont icon-jiantou" to="/control"></router-link>
      </div>
    </div>
    <div class="logs5">
      <div>
        <p>我的霸服游戏特权</p>
        <router-link tag="span" class="iconfont icon-jiantou" to="/control"></router-link>
      </div>
      <div>
        <p>腾讯应用专属免流量特权服务</p>
        <router-link tag="span" class="iconfont icon-jiantou" to="/control"></router-link>
      </div>
      <div>
        <p>新游预约</p>
        <router-link tag="span" class="iconfont icon-jiantou" to="/control"></router-link>
      </div>
      <div>
        <p>游戏礼包</p>
        <router-link tag="span" class="iconfont icon-jiantou" to="/control"></router-link>
      </div>
      <div>
        <p>游戏宝券</p>
        <router-link tag="span" class="iconfont icon-jiantou" to="/control"></router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      img:"",
      is_login: false
    };
  },
  created() {
    let cks = document.cookie;
    if (cks) {
      this.is_login = true;
      // this.profile = "//127.0.0.1/xiaomi/img/head.gif";
      // if(cks.split(";")[0].split("=")[0]=="name")
      this.name = cks.split(";")[0].split("=")[1];
      this.img = cks.split(";")[1].split("=")[1];
      
      console.log(this.name);
       console.log(this.img);
    }
  },
  methods: {
    zhuxiao() {
      var d = new Date();
      d.setDate(d.getDate() - 1);
       document.cookie = "name=''" + ";expires=" + d.toGMTString();
       document.cookie = "img=''" + ";expires=" + d.toGMTString();
      // console.log(str )
      // document.cookie = str;
      location.href = "#/control/login/login";
      this.is_login = false;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.headico{
  width: 100%;
  height: 100%;
  img{
    margin-top: 2rem;
     width:3rem;
    height: 3rem;
    border-radius: 50%
  }
}
.logs3 {
  margin-top: 0.5rem;
  display: flex;
  height: 8rem;
  flex-direction: column;
  background-color: #fff;
  div {
    flex-basis: 32%;
    line-height: 2.6rem;
    border-bottom: 0.001rem solid rgb(207, 199, 199);
    p {
      display: inline-block;
      color: black;
      font-size: 0.8rem;
      margin-left: 1rem;
    }
    span {
      float: right;
      margin-right: 1rem;
    }
  }
  div:last-child {
    border-bottom: none;
  }
}
.logs5 {
  margin-top: 0.5rem;
  display: flex;
  height: 14rem;
  flex-direction: column;
  background-color: #fff;
  div {
    flex-basis: 32%;
    line-height: 2.6rem;
    border-bottom: 0.001rem solid rgb(207, 199, 199);

    p {
      display: inline-block;
      color: black;
      font-size: 0.8rem;
      margin-left: 1rem;
    }
    span {
      float: right;
      margin-right: 1rem;
    }
  }
  div:last-child {
    border-bottom: none;
  }
}
.loginjf {
  width: 100%;
  height: 5rem;
  background-color: #fff;
  display: flex;
  div {
    flex-basis: 50%;
    span {
      display: inline-block;
      line-height: 5rem;
      width: 1rem;
      height: 1rem;
    }
    p {
      display: inline-block;
    }
    .icon-tubiaozhizuo-:before {
      width: 1rem;
      height: 1rem;
      background-color: red;
      border-radius: 50%;
      color: #fff;
    }
  }
}
.logins {
  background-color: #fff;
  height: 7rem;
  .icon-touxiang {
    font-size: 4rem;
    padding-top: 3rem;
  }
  span {
    display: inline-block;
    padding-top: 1.5rem;
    color: blue;
  }
  .username{
    padding-top:0.2rem; 
  }
}
.mint-header {
  background-color: #fff;
}
.mint-header-button > a {
  color: black;
}
.names {
  display: inline-block;
  .zhuxiao {
    position: absolute;
    display: inline-block;
    bottom: 1rem;
    height: 2.5rem;
    width: 100%;
    line-height: 0;
    left: 0;
    color: #fff;
    background-color: rgb(255, 2, 2);
  }
  div:nth-child(1b) {
    font-size: 4rem;
    padding-top: 3rem;
  }
}
</style>

